@import "./../theme";
@import "./../var";
// 公共常用大小
$common-size-large: 0.625rem; // 10px
$common-size-default: 0.5rem; // 8px
$common-size-small: 0.25rem; // 4px
$common-size-mini: 0.125rem; // 2px

// 公共 - 外间隔
$marginExtraLarge: 1.25rem; // 20px
$marginLarge: 0.875rem; // 14px
$marginCommon: 0.75rem; // 12px
$marginNormal: 10px; // 10px
$marginSmall: 0.5rem; // 8px
$marginMini: 0.25rem; // 4px
$marginExtraMini: 1px;

// 公共 - 内间隔
$commonPaddingSuperLarge: 24px;
$commonPaddingExtraLarge: 20px;
$commonPaddingLarge: 18px;
$commonPaddingBig: 16px;
$commonPaddingExtraCommon: 12px;
$commonPaddingCommon: 10px;
$commonPaddingRegular: 8px;
$commonPaddingLittle: 6px;
$commonPaddingSmall: 4px;
$commonPaddingMini: 2px;
$commonPaddingExtraMini: 1px;
// 设计器相关定义
$widget-container-border-color: #D5DEE7;
$widget-container-border: 1px solid $widget-container-border-color;
$widget-container-border-hover-color: #e9e9f9;
$widget-container-border-hover: 1px solid $widget-container-border-hover-color;
$widget-container-border-active-color: #c1d1fa;
$widget-container-border-active: 1px solid $widget-container-border-active-color;
$widget-container-bg: $bgColorSecondary;
$widget-container-bg-active: #e0e7f9;
$widget-container-bg-hover: $bgColorSecondary;
$widget-container-bg-hover-active: fade-out($colorPrimary, 0.80);

$widget-item-bg: transparent;
$widget-item-bg-active: #e0e7f9;
$widget-item-bg-hover: fade-out($colorInfo, 0.95);
$widget-item-bg-hover-active: fade-out($colorPrimary, 0.6);
$widget-item-common-padding: 5px;
$widget-item-common-margin: 5px;

$widget-control-shadow: 0 3px 0.8rem 1px rgba(0, 0, 0, 0.2);
$widget-control-position: 0;
$widget-control-bg: fade-out($colorTextRegular, 0.7);
$widget-control-height: 20px;
$widget-control-color: $colorTextInverse;
$widget-control-hover-color: fade-out($colorTextRegular, 0.2);
$widget-min-height: 40px;


// 宽度 - 组件属性 - 行内分布 - 确认打开属性按钮
$widgetConfigInlineSettingOpenBtn: 60px;

// 右侧属性栏样式
$widget-config-bg-color: #FCFCFD;
$widget-config-header-height: 2.5rem; // 40px
$widget-config-header-shadow: 0px $common-size-mini $common-size-large 0px rgba(0, 0, 0, 0.07);
$widget-config-collapse-active-color: #FFFFFF;
$widget-config-layout-padding-width: 0.875rem; // 15px
$widget-config-el-collapse-item__content-padding: $common-size-large 0.875rem; // 10px 15px
$widget-form-item-group-border: 1px solid $borderColorPrimary;
$widget-form-item-group-padding: 10px 10px 10px 0;
$widget-config-form-item-space: 0.625rem;
$widget-config-option-config-section-bg: #FAFAFB;
$widget-config-option-config-section-text-color: #C9CDD4;
$widget-config-error-color: #FA5151;
$widget-config-el-form-item-sub-content-margin: 0.5rem;

@mixin ghost() {
  background: $widget-container-bg-active;
  border: 2px dashed $widget-container-border-active-color;
  height: $widget-min-height;
  box-sizing: content-box;
  font-size: 0;
  content: '';
  overflow: hidden;
  border-radius: $radiusRegular;
  padding: 0;

  &:after {
    content: '在此放置组件';
    font-size: $fontSizeSmall;
    display: flex;
    align-items: center;
    justify-content: center;
    height: $widget-min-height;
    color: $colorTextSecondary;
  }
}

